<template>
  <div class="foodclass">
    <top-header title="菜谱分类"></top-header>

    <div class="fenlei">
      <div v-for="(food, index) in foods" :key="index" class="foodlist">
        <div class="title">{{ food.title }}</div>
        <ul>
          <li
            @click="selectdish(i)"
            v-for="(i, index) in food.entries"
            :key="index"
          >
            <img :src="getImage(i.picurl)" alt="" />
            <p>{{ i.name }}</p>
          </li>
        </ul>
      </div>
    </div>

    <div id="box" class="setbox" :class="{ show: isshow }" v-show="tan == 'A'">
      <div class="header">
        <button class="off" @click="close">X</button>
        <div v-for="(item, index) in foods" :key="index" >
          <div v-for="(i, index) in item.entries" :key="index">
            <div v-if="i.hasOwnProperty('sub_categories') == true">
              <div v-if="i.name == name">
                <div v-for="(j, index) in i.sub_categories" :key="index">
                  <p>{{ j.title }}</p>
                  <div class="j">
                    <div
                      v-for="(k, index) in j.entries"
                      :key="index"
                      class="k"
                      @click="selectfood(k)"
                    >
                      {{ k }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopHeader from "../components/TopHeader.vue";
export default {
  components: { TopHeader },
  data() {
    return {
      // keys:"",
      foods: "",
      name: "",
      tan: "",
      isshow: false,
    };
  },
  methods: {
    close() {
      this.isshow = false;
    },
    getfoods() {
      this.$http.get("/api/getfood").then((res) => {
        console.log(res.data.data.food.content);
        this.foods = res.data.data.food.content;
        
        // this.keys = Object.keys(res.data.data.food.content);
      });
    },
    selectdish(i) {
      this.name = i.name;
      console.log(this.name);
      if (
        this.name == "影视综艺" ||
        this.name == "烹调方法" ||
        this.name == "蛋类豆类" ||
        this.name == "腌肉腌菜" ||
        this.name == "调味酱料" ||
        this.name == "粮油干果" ||
        this.name == "厨具" ||
        this.name == "口味" ||
        this.name == "餐厅Cosplay" ||
        this.name == "节日节气"
      ) {
        this.isshow = true;
        this.tan = "A";
      } else {
        this.$http
          .post("/api/getdish", {
            params: {
              name: i.name,
            },
          })
          .then(
            (res) => {
              console.log(
                res.data.content.content[0].content.object.ingredient
              );
              this.$store.dispatch('saveFood',res.data.content.content);

              this.$router.push({
                name: "HomeDishes",
                // query: {
                //   store: res.data.content.content,
                //   //  keys:Object.keys(res.data.content.content),
                // },
              });
            },
            (err) => {}
          );
      }
    },
    selectfood(k) {
      this.name = k;
      console.log(this.name);
      this.$http
        .post("/api/getfoods", {
          params: {
            name: k,
          },
        })
        .then(
          (res) => {
            //  console.log(res.data.content.content[0].content.object.ingredient);
               this.$store.dispatch('saveFood',res.data.content.content);

              this.$router.push({
                name: "HomeDishes",
                // query: {
                //   store: res.data.content.content,
                //   //  keys:Object.keys(res.data.content.content),
                // },
              });

            
          },
          (err) => {}
        );
    },
    getImage(url) {
      // console.log(url);
      if (url !== undefined) {
        return url.replace(
          /^(http)[s]*(\:\/\/)/,
          "https://images.weserv.nl/?url="
        );
      }
    },
  },
  created() {
    this.getfoods();
  },
};
</script>
<style lang="scss" scoped>
.foodclass {
  margin-bottom: $tabbar-height;
  .fenlei {
    width: 375.2px;
    margin-top: 70px;
    .title {
      // margin: 60px;
      font-family: Microsoft YaHei;
      font-size: 18px;
      padding-bottom: 10px;
      color: black;
      font-weight: bold;
    }
    ul {
      display: flex;
      flex-direction: row;
      // justify-content: space-around;
      flex-wrap: wrap;
      padding: 0;
    }
    li {
      width: 80px;
      height: 80px;
      margin-top: 10px;
      margin-left: 10px;
      list-style-type: none;
      img {
        width: 100%;
        height: 100%;
      }
      p {
        text-align: center;
        margin-top: -30px;
        color: white;
        font-weight: bold;
      }
    }
  }

  .setbox {
    position: fixed;
    top: 20%;
    bottom: 0px;
    width: 375.2px;
    height: 100%;
    background: white;
    border-left: 1px solid #cfd8dc !important;
    box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.12);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    right: -460px;
    padding: 0;
    overflow-y: scroll;
    button {
      float: right;
      margin-top: 10px;
      margin-right: 5px;
      border-radius: 50%;
      border: 0;
      outline: none;
    }
   
    p {
      margin-bottom: 0;
      font-size: 18px;
      font-weight: bold;
      color: black;
      padding: 20px 0px 0px 20px;
    }
  }
  .show {
    right: 0;
  }
  .j {
    margin: 0;
    padding: 0 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .k {
      width: 22%;
      background: #f1f1f1;
      margin: 10px 10px 10px 0;
      text-align: center;
      padding: $common-padding;
      box-sizing: border-box;
      list-style-type: none;
    }
  }
}
</style>